import { ref, reactive, computed } from "vue"

export default function viewHook(params) {
    const { scale = 1, containerInfo } = params
    // 鼠标信息
    const viewInfo = reactive({
        mousedownx: 0, // 鼠标按下时的x坐标
        mousedowny: 0, // 鼠标按下时的y坐标
        x: 0,  // 鼠标按下时view的x坐标
        y: 0,  // 鼠标按下时view的y坐标
        diffx: 0, // 差值
        diffy: 0, // 差值
        sheelOrigin: '0 0' // 缩放中心
    })

    const viewRef = ref(null)
    
    // 样式
    const viewStyle = computed(() => {
        return {
            transform: `translate(${viewInfo.diffx}px, ${viewInfo.diffy}px) scale(${scale.value})`,
            // 'transform-origin': viewInfo.sheelOrigin
        }
    })

    // 背景移动事件
    const view_mousemove_handler = (e) => {
        const offsetx = containerInfo.value.left
        const offsety = containerInfo.value.top
        viewInfo.diffx = e.clientX - viewInfo.mousedownx + viewInfo.x -offsetx
        viewInfo.diffy = e.clientY - viewInfo.mousedowny + viewInfo.y -offsety
    }

    return {
        viewInfo,
        viewStyle,
        viewRef,
        view_mousemove_handler
    }
}